<template>
    <!-- 个人中心的右边栏个人资料修改 -->
    <div class="peson1" v-if="shoutr">
        <el-form rel-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
            class="demo-ruleForm">
            <div class="personup">
                <a href="#">个人中心</a>
                <span> 个人资料</span>
            </div>
            <div class="persodown">
                <div class="persond1">
                    <ul class="person01">
                        <li class="ncheng">修改昵称:</li>
                        <li class="nivkm">
                            <div class="soanni">
                                <input type="text" v-model="ruleForm.nickname">

                            </div>
                            <div class="cseen"> 
                                <!-- <router-link to="/personal/personalData/personzl">
                                    查看我的个人资料
                                </router-link> -->
                                  <a href="#" @click="geren">查看我的个人资料</a>
                                
                            </div>

                        </li>
                    </ul>
                    <ul class="person02">
                        <li class="myheader">我的头像：</li>
                        <li class="avarte">
                            <el-upload class="avatar-uploader" action="/api/upload" :show-file-list="false"
                                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                                <img v-else-if="ruleForm.avatar" :src="ruleForm.avatar" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                            </el-upload>
                        </li>
                    </ul>
                    <ul class="person03">
                        <li class="sex1">性别：</li>
                        <li class="ctong">
                            <el-radio-group v-model="ruleForm.gender">
                                <el-radio :label="1">男</el-radio>
                                <el-radio :label="0">女</el-radio>
                                <el-radio :label="2">保密</el-radio>
                            </el-radio-group>
                        </li>
                    </ul>
                    <ul class="person04">
                        <li class="qqxig">QQ号码：</li>
                        <li><input type="text" v-model="ruleForm.qq"></li>
                    </ul>
                    <ul class="person06">
                    </ul>
                    <ul class="person07">
                        <div class="person077">
                            <li class="textarea1">个性签名：</li>
                            <li class="textarea">
                                <textarea  maxlength="80" @input="shuziFn" id="" cols="30" rows="10" v-model="ruleForm.signature"></textarea>
                            </li>
                        </div>

                        <div class="maxfont">
                            <span>最多输入{{remnant}}个字符</span>
                        </div>
                    </ul>
                    <ul class="person08">
                        <div class="person077">
                            <li class="textarea1">自我介绍：</li>
                            <li class="textarea2">
                                <textarea name="" id="" cols="30" rows="10"
                                maxlength="300" @input="shuziFn1"   v-model="ruleForm.selfinTroduction"></textarea>
                            </li>
                        </div>

                        <div class="maxfont">
                            <span>最多输入 {{remnant1}}个字符</span>
                        </div>
                    </ul>
                    <ul class="person09">
                        <li class="btnperson">
                            <el-row class="mb-4">
                                <el-button type="warning" @click='submitBc'>提&nbsp;&nbsp;交</el-button>
                                <el-button @click="fnn(uid)">保&nbsp;&nbsp;存</el-button>
                            </el-row>
                        </li>
                        <li></li>
                    </ul>
                </div>
            </div>
        </el-form>
    </div>
    <personzl v-if="showfaa" :pehuiy="ruleForm"/>
</template>

<script lang="ts">
import { ref } from 'vue'
const radio = ref(3)
import { UploadFile, ElMessage, UploadRawFile } from "element-plus";
import { defineComponent } from 'vue';
import { pesonmodfity, Rsultpesonmodfity } from '@/utils/api';
import personzl from '@/components/header/personzL.vue';
interface resI {
    errno: number;
    data: {
        url: string;
        alt: string
    }
}
export default defineComponent({
    data() {
        return {
            remnant:80,
            remnant1:300,
            uid: 1,
            shoutr: true,//这个组件是默认显示
            showfaa: false,//默认隐藏
            src: "",
            imageUrl: "",
            ruleForm: {
                avatar: "",
                nickname: "",
                gender: "",
                qq: "",
                signature: "",
                selfinTroduction: "",
            },
            rules: {}
        };
    },
    methods: {
        //texatar 数字的限制
        shuziFn(){
            this.remnant=80-this.ruleForm.signature.length
        },
        shuziFn1(){
            this.remnant1=300-this.ruleForm.selfinTroduction.length
        },
        handleAvatarSuccess(response: resI, uploadFile: UploadFile) {
            console.log(response, uploadFile);
            this.ruleForm.avatar = response.data.url;
            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
            this.imageUrl = URL.createObjectURL(uploadFile.raw!);
        },
        beforeAvatarUpload(rawFile: UploadRawFile) {
            if (rawFile.type !== "image/jpeg") {
                ElMessage.error("Avatar picture must be JPG format!");
                return false;
            }
            else if (rawFile.size / 1024 / 1024 > 2) {
                ElMessage.error("Avatar picture size can not exceed 2MB!");
                return false;
            }
            return true;
        },
        //提交表单的数据
        submitBc() {
            pesonmodfity(this.ruleForm).then((res) => {
                //操作结果的提示就可以了
                if(res.data.code==1){
                    alert(res.data.msg)
                }
            }).catch((err) => {
                console.log(err);
            });
        },
        //
        geren() {
            this.shoutr = false;
            this.showfaa = true;

        },
        //保存数据
        fnn(uid: number){
            Rsultpesonmodfity(uid).then((res) => {
                this.ruleForm = res.data.results;
                console.log('123', this.ruleForm);
            }).catch((err) => {
                console.log(err);
                

            })
        },

    },

    mounted() {
        this.fnn(1)
    },
    components: { personzl }
}) 
</script>
<style lang="scss">
@import '@/assets/sass/pesonData.scss';
</style>

<style lang="scss" scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 117px;
    display: block;
}

:deep(.el-form) {
 margin-left: 0; 
}
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 117px;
    text-align: center;
}
</style>
    